mycarousel

Learning Essentials:1. Responsive Carousel DiagramKeynote Teacher: Li TinghuiIn this lesson we need to make a carousel below the navigation bar to automatically play the latest important developments.A Responsive Carousel DiagramResponsive Carousel DiagramDivID= "Mycarousel"class= "Carousel Slide"> olclass= "Carousel-indicators"> LiData-target= "#myCarousel"data-slide-to= "0"class= "Active">Li>

Must-see reference:Http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.htmlCode:1 DOCTYPE HTML>2 HTML>3 Head>4 title>Bootstrap instances-Simple carousel (Carousel) Plugintitle>5 Linkhref= "Http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel= "stylesheet">6 Scriptsrc= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js">Script>7 Scriptsrc= "Http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js">Script>8 Head>9 Body>Ten One DivID= "

This is a very cool, bootstrup3.x and HTML5 responsive full-screen width jquery slide effect. The slide can be adapted to the width of the screen, using the HTML5 data property to specify the various properties required for the slide. Easy to use, beautiful and generous interface. As follows:Online preview Source DownloadThe implemented code.HTML code:DivID= "Mycarousel"class= "Carousel Slide"Data-ride= "Carousel"> Indicators - olclass=

;Informationa>Li> Li>ahref="#">spanclass= "Glyphicon glyphicon-fire">span>Casea>Li> Li>ahref="#">spanclass= "Glyphicon glyphicon-question-sign">span>Abouta>Li> ul> Div> Div>nav>Set the Navbar,navbar-default class for the nav tag, navbar-fixed-top the navigation bar above the window, set the UL class to NAV and Navbar-nav as the window moves, and the responsive navigation bar to set the collapsible area, That is, to a div plus collapse and Navbar

Insert JS and CSS support:rel= "stylesheet" href= "css/bootstrap.min.css"/> src= "Js/jquery-1.9.1.min.js"> Script>src= "Js/bootstrap.min.js"> script>HTML code: DivID= "Pictures"class= "Item"> DivID= "Mycarousel"class= "Carousel Slide"> Carousel (Carousel) Indicator - olclass= "Carousel-indicators"> LiData-target= "#myCarousel"data-slide-to= "0"cla

Demo Effect:Code:DOCTYPE HTML>HTML> Head> MetaCharSet= "Utf-8"> Linkrel= "stylesheet"href= "Http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> style>Body{padding:10px;margin:10px; } style> Head> Body> DivID= "Mycarousel"class= "Carousel Slide"> olclass= "Carousel-indicators"> LiData-target= "#myCarousel"data

Div> DivID= "Mycarousel"class= "Carousel Slide"> Carousel (Carousel) Indicator - olclass= "Carousel-indicators"style= "bottom:0;"> C:foreachItems= "${advertlist}"var= "advert"Varstatus= "Advert1"> c:ifTest= "${advert1.index = = 0}"> LiData-target= "#myCarousel"data-slide-to= "${advert1.index}"class= "Active">Li> c:if>

" Property user tag The carousel starts animating when the page loads. If you are calling in JavaScript, use the key-value pairs directly and remove the data-;Setting custom Properties $ (' #myCarousel '). Carousel ({ //Set AutoPlay/2 sec interval:2000, //Set Pause button event pause: ' hover ',// only once wrap:false, }); The Carousel plug-in also provides a number of methods, as follows: Click on the button to execu

Online Demo 1 Local Downloads HtmlClass="Container">Class="Col-md-12">Bootstrap 3 thumbnail Slide gallery effectClass="Container"> Class="Row">Class="Col-md-12"Id="Slider">Class="Col-md-12"Id="Carousel-bounding-box">Id="Mycarousel"Class="Carousel Slide">Class="Carousel-inner">Class="Active Item"Data-slide-number="0">Src="Http://www.gbtags.com/gb/laitu/1200x480amp;text=1"Class="Img-responsive">Class="Item"Data-slide-number="1">Src="

adding data-ride= "Carousel". You do not need to use the initialized JS function. So, if Carousel doesn't play automatically, check this section first. Other parameters can be added here, such as the time interval to set the rotation of the image.Code: data-ride= "Carousel " data-interval= ">"2, in fact, there are manual initialization of the Carousel component methodThis method is used in bootstrap 2.x, when the data-ride= "Carousel" method is used, it can be initialized manually. The code is

adding data-ride= "Carousel". You do not need to use the initialized JS function. So, if Carousel doesn't play automatically, check this section first. Other parameters can be added here, such as the time interval to set the rotation of the image.Code: data-ride= "Carousel " data-interval= ">"2, in fact, there are manual initialization of the Carousel component methodThis method is used in bootstrap 2.x, when the data-ride= "Carousel" method is used, it can be initialized manually. The code is

used. You only need to add data-ride = "movie usel" to enable automatic playback. You do not need to use initialization js functions. Therefore, if carousel does not play the video automatically, check this part first. Other parameters can be added here, such as setting the image rotation interval. Code: Data-ride = "carousel"Data-interval = "2000"> 2. You can also manually initialize the carousel component. This method is used in Bootstrap 2.x. When the data-ride = "carousel" method is not use

HTML code "Background-color:pink">"Mycarousel" class="Carousel Slide"style="margin-top:150px;"> class="Carousel-inner"> class="Active Item">"images/2.jpg"Width="450px"height="200px"/>class="Item">"images/3.jpg"Width="450px"height="200px"/>class="Item">"images/4.jpg"Width="450px"height="200px"/>"margin-left:450px; margin-top:280px; width:100px ;" class="Carousel-control Left"href="#myCarousel"Data-slide="pr